<template>
  <div class="three-demo">
    <aside>
      <h1>Three.js Lab</h1>
      <nav>
        <Nav :data="menus" @update="change"/>
      </nav>
    </aside>

    <iframe ref="iframe" frameborder="0"></iframe>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onBeforeRouteLeave, useRoute } from 'vue-router'
// @ts-ignore
import Nav from '../../components/Nav/index.vue'
import menus from './menus'

const iframe = ref(null)
const route = useRoute()

onMounted(() => {
  // 刷新页面时
  if (route.name === 'src') {
    change({path: route.path.slice(4)})
  }
})

function change(val: any) {
  (iframe.value as any).src = val.path
}

</script>

<style lang="less" scoped>
.three-demo {
  display: grid;
  height: 100vh;
  grid-template-columns: 260px 1fr;

  aside {
    display: grid;
    grid-template-rows: 45px 1fr;
    background: #f5f5f5;
    overflow: hidden;

    h1 {
      padding: 5px 10px;
      font-size: 24px;
    }

    nav {
      overflow: auto;
    }
  }

  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>